<template>
  <div class="dashboard-container">
    <el-row>
      <el-col>
        <el-button
          type="success"
          icon="el-icon-check"
          round
          @click="toSubmit(0)"
          >新增</el-button
        >
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4" v-for="tag in tagList" :key="tag.id">
        <el-card :body-style="{ padding: '0px' }">
          <img
            :src="`http://localhost:7788/tag/down?fileName=${tag.avatar}`"
            class="image"
          />

          <div style="padding: 14px">
            <h3>{{ tag.tagName }}</h3>
            <div class="bottom clearfix">
              <el-button
                type="primary"
                @click="toSubmit(tag.id)"
                size="mini"
                round
                icon="el-icon-edit"
                >修改
              </el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                round
                size="mini"
                @click="deleteTag(tag.id)"
                >删除</el-button
              >
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 模态框 -->
    <!-- Form -->
    <el-dialog title="标签修改/添加" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="标签编号">
          <el-input
            v-model="form.id"
            autocomplete="off"
            :disabled="true"
          ></el-input>
        </el-form-item>

        <el-form-item label="标签名称">
          <el-input v-model="form.tagName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="标签图片">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:7788/tag/up"
            :show-file-list="true"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="form.avatar"
              :src="`http://localhost:7788/tag/down?fileName=${form.avatar}`"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitTag">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import tagApi from "@/api/tag";
export default {
  inject: ["reload"],
  data() {
    return {
      tagList: [],
      dialogVisible: false,
      activeName: "info",
      form: {
        id: 0,
        tagName: null,
        avatar: null,
      },
      dialogFormVisible: false,
      imageUrl: "",
      fileList: [],
      count: 0,
    };
  },
  created() {
    this.list();
  },
  methods: {
    deleteTag(id) {
      tagApi.count(id).then((result) => {
        this.count = result.data;
      });
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (this.count > 0) {
            this.$confirm("当前标签有文章关联，是否强制删除?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then((result) => {
                tagApi.deleteRelation(id).then((res) => {
                  this.$message({
                    type: "success",
                    message: "已强制删除",
                  });
                  this.reload();
                });
              })
              .catch((err) => {
                this.$message({
                  type: "info",
                  message: "已取消删除",
                });
              });
          } else {
            tagApi.delete(id).then((res) => {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.reload();
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    submitTag(id) {
      if (this.form.id == 0) {
        tagApi.add(this.form).then((response) => {
          if (response.data == true) {
            // 刷新页面
          }
        });
      } else {
        tagApi.edit(this.form).then((response) => {
          if (response.data == true) {
            // 刷新页面
          }
        });
      }
      // 刷新页面
      this.dialogFormVisible = false;
      this.reload();
    },
    uploadFileURL() {
      tagApi.up(this.fileList[0].row);
    },
    toSubmit(id) {
      this.form = { id: 0, categoryName: null, avatar: null};
      if (id != 0) {
        tagApi.getById(id).then((res)=>{
          this.form=res.data;
        });
      }
      this.form.id = id;
      this.dialogFormVisible = true;
    },
    list() {
      tagApi.getList().then((response) => {
        this.tagList = response.data;
      });
    },
    // 上传成功的回调
    handleAvatarSuccess(res) {
      this.imageUrl = res.data;
      this.form.avatar = this.imageUrl;
    },
    // 校验
    beforeAvatarUpload(file) {
      var set = new Set();
      set.add("image/jpeg");
      set.add("image/png");
      // const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      const isImg = set.has(file.type);
      if (!isImg) {
        this.$message.error("上传头像图片只能是 JPG/PNG格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isImg && isLt2M;
    },
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 150px;
  height: 150px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>

